<template>
  <pre>{{ formValues }}</pre>
  <wanglei-form :model="formValues" :rules="formRules" label-width="100px" ref="formRef">
    <wanglei-form-item label="姓名" prop="name">
      <wanglei-input v-model="formValues.name" placeholder="请输入姓名"></wanglei-input>
    </wanglei-form-item>
    <wanglei-form-item label="密码" prop="password">
      <wanglei-input v-model="formValues.password" type="password" placeholder="请输入密码"></wanglei-input>
    </wanglei-form-item>
    <wanglei-form-item label="性别" prop="sex">
      <wanglei-radio-group v-model="formValues.sex">
        <wanglei-radio label="0">男</wanglei-radio>
        <wanglei-radio label="1">女</wanglei-radio>
      </wanglei-radio-group>
    </wanglei-form-item>
    <wanglei-form-item label="技术栈" prop="skills">
      <wanglei-checkbox-group v-model="formValues.skills">
        <wanglei-checkbox label="Vue"></wanglei-checkbox>
        <wanglei-checkbox label="React"></wanglei-checkbox>
        <wanglei-checkbox label="Angular"></wanglei-checkbox>
        <wanglei-checkbox label="Node"></wanglei-checkbox>
      </wanglei-checkbox-group>
    </wanglei-form-item>
    <wanglei-form-item>
      <wanglei-button type="primary" @click="onSubmit">提交</wanglei-button>
    </wanglei-form-item>
  </wanglei-form>
</template>

<script>
import { defineComponent, reactive } from 'vue'
export default defineComponent({
  setup() {
    const formValues = reactive({
      name: '',
      password: '',
      sex: '',
      skills: []
    })
    const formRules = reactive({
      name: [
        { required: true, message: '姓名必填' },
        { max: 6, message: '姓名不能超过6位', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '密码必填', trigger: 'blur' },
        { min: 8, message: '密码最少8位', trigger: 'blur' }
      ],
      sex: [
        { required: true, message: '请选择性别' }
      ],
      skills: [
        { required: true, message: '请至少选择一个技能' }
      ]
    })

    const onSubmit = () => {
      console.log("提交按钮回调执行了");
    }

    return {
      formValues,
      formRules,
      onSubmit
    }
  }
})
</script>

<style scoped>

</style>
